HTML <picture> element

You may use the HTML <picture> element to show various images for different devices or screen sizes.

The HTML <picture> element allows web developers to define image resources with greater flexibility.

The <picture> element includes one or more <source> elements, each of which refers to a distinct image through the srcset property. This allows the browser to select the picture that is best suited to the current view and/or device.

Each <source> element has a media property that specifies when the picture is appropriate.

Example

<picture>
  <source
    media="(min-width: 650px)"
    srcset="/img/tutorial/leaf.jpg"
    class="image"
  />
  <source
    media="(min-width: 465px)"
    srcset="/img/tutorial/library.jpg"
    class="image"
  />
  <img
    src="/img/codinghabitslogo.png"
    style="height: 300px, width: 300px"
    class="image"
  />
</picture>

Loading...

tip

Open the editor in new window and change the preview size to see the image change.